﻿@page "/progress-bar/linear"
@using Syncfusion.Blazor.ProgressBar
@inject NavigationManager Navigation
@using Syncfusion.Blazor
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates a linear progress bar with track color customization, segments and animation. </p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the linear progress bar. Progress bar is used to visualize the progression of an extended operation. The sample shows the determinate and indeterminate states, buffer and segments of linear progress bar. </p>
</ActionDescription>

<div class="control-section">
    <div class="row linear-parent">
        <div>
            <div class="@LabelClass">Determinate</div>
            <SfProgressBar @ref="ProObj1" Type="ProgressType.Linear" Height="60"
                           Value="100" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
        <div>
            <div class="@LabelClass">Indeterminate</div>
            <SfProgressBar @ref="ProObj2" Type="ProgressType.Linear" Height="60"
                           IsIndeterminate="true" Value="20" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
        <div>
            <div class="@LabelClass">Segment</div>
            <SfProgressBar @ref="ProObj4" Type="ProgressType.Linear" Height="60"
                           SegmentCount="8" Value="100" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
        <div>
            <div class="@LabelClass">Buffer</div>
            <SfProgressBar @ref="ProObj3" Type="ProgressType.Linear" Height="60"
                           SecondaryProgress="60" Value="40" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
        <div>
            <div class="@LabelClass">Active</div>
            <SfProgressBar @ref="ProObj5" Type="ProgressType.Linear" Height="60"
                           IsActive="true" Value="100" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />
            </SfProgressBar>
        </div>
    </div>
    <div class="row linear-parent">
        <button id="reLoad" @onclick="ProgressRefresh" class="e-control e-btn e-lib e-outline e-primary">Reload</button>
    </div>
</div>

@code{
    SfProgressBar ProObj1, ProObj2, ProObj3, ProObj4, ProObj5;

    public async Task ProgressRefresh()
    {
        await ProObj1.RefreshAsync();
        await ProObj2.RefreshAsync();
        await ProObj3.RefreshAsync();
        await ProObj4.RefreshAsync();
        await ProObj5.RefreshAsync();
    }

    string CurrentUri;
    Theme CurrentTheme;
    string LabelClass = "col-lg-12 col-sm-12 progressbar-label";
    protected override void OnInitialized()
    {
        CurrentUri = Navigation.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            CurrentTheme = Theme.Material;
            LabelClass = "col-lg-12 col-sm-12 progressbar-label-material";
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            CurrentTheme = Theme.Fabric;
            LabelClass = "col-lg-12 col-sm-12 progressbar-label-material";
        }
        else if (CurrentUri.IndexOf("bootstrap4") > -1)
        {
            CurrentTheme = Theme.Bootstrap4;
            LabelClass = "col-lg-12 col-sm-12 progressbar-label-bootstrap";
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            CurrentTheme = Theme.Bootstrap;
            LabelClass = "col-lg-12 col-sm-12 progressbar-label-bootstrap";
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            CurrentTheme = Theme.HighContrast;
            LabelClass = "col-lg-12 col-sm-12 progressbar-label-dark";
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            CurrentTheme = Theme.Tailwind;
            LabelClass = "col-lg-12 col-sm-12 progressbar-label-material";
        }
        else
        {
            CurrentTheme = Theme.Bootstrap4;
            LabelClass = "col-lg-12 col-sm-12 progressbar-label-material";
        }
    }

}
<style>


    #control-container {
        padding: 0px !important;
    }

    .linear-parent {
        text-align: center;
        width: 80%;
        margin: auto;
    }

    .progressbar-label-material {
        text-align: left;
        font-family: Roboto-Regular;
        font-size: 14px;
        color: #3D3E3C;
        margin-left: 10px;
        padding: 0px;
        top: 20px;
    }

    .progressbar-label-bootstrap {
        text-align: left;
        font-family: Roboto-Regular;
        font-size: 14px;
        color: #3D3E3C;
        margin-left: 10px;
        padding: 0px;
    }

    .progressbar-label-dark {
        text-align: left;
        font-family: Roboto-Regular;
        font-size: 14px;
        color: white;
        margin-left: 10px;
        padding: 0px;
        top: 20px;
    }

    #reLoad {
        border-radius: 4px;
        text-transform: capitalize;
    }
</style>